<!--<!DOCTYPE html>-->
<meta charset="UTF-8">
<style>
*{
    margin:0px;
    padding:0px;
}
html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:black;
}
#game{
    max-width:1024px;
    max-height:768px;
    width:100%;
    height:100%;
    margin:0 auto;
    background:url(images/game_bg_2_hd.jpg);
    background-size:100%;
    
}
</style>
<div id="game"></div>
<script src="js/Fish.js" ></script>
<script>
    var fishs = [];
window.onload = function(){
  var ww = document.documentElement.clientWidth;
  var wh = document.documentElement.clientHeight;

   function createFish(){
       for(var i=0;i<30;i++){
//       var f1 = new Fish(-i*100,10,178,1870,"fish10.png",10,8);
//       var f2 = new Fish(300,10,166,2196,"fish9.png",12,7);
//       var f3 = new Fish(400,10,55,296,"fish1.png",8,5);
           var f = new Fish(-i*50-50,Math.random()*600
               ,55,296,"images/fish1.png",8,5);
           fishs.push(f);

//       fishs.push(f2);
//       fishs.push(f3);
//       fishs.push(f4);
       }
   }

   createFish();

    var i = 0;
    var timer = setInterval(function(){
        i++;
        if(i==100) i = 0;
        drawFish();
    },1000/60);

    function drawFish(){
        for(var j=0;j<fishs.length;j++){
            var f = fishs[j];

            if(i%f.time==0){
                f.bgy = f.bgy - parseInt(f.s.height);
                if(f.bgy==-parseInt(f.s.height)*f.count/2) f.bgy = 0;
                f.s.background = "url("+f.bgimg+") 0px "+f.bgy+"px";

                f.s.left = parseInt(f.s.left) + 5 + "px";
            }

            var x = parseInt(f.s.left) + "px";
            var y = parseInt(f.s.top) + "px";

            if(x>ww+f.width){
                //console.log(f.e);
//                if(f.e) {
//                    document.body.removeChild(f.e);
//                }
                fishs.splice(fishs.indexOf(f),1);
                console.log(fishs);
                document.body.removeChild(f.e);
                delete f;
            }

            if(fishs.length==15){
                createFish();
            }
        }
    }
};
</script>
